<template>
  <div class="bottom-bar">
    <div id="shouye">
      <router-link to="/">
        <img src="static/shouye1.png" >
        <span>首页</span>
      </router-link>
    </div>


    <div id="fenlei">
      <router-link to="/fenlei">
        <img src="static/fenlei1.png" >
        <span>分类</span>
      </router-link>
    </div>

    <router-link to="/dhw">
      <img id="dhw" src="static/dht-3.png">
    </router-link>

    <div id="shop-car">
      <router-link to="/shopcar">
        <img src="static/shop-car1.png" >
        <span>购物车</span>
      </router-link>
    </div>


    <div id="mine">
      <router-link to="/mine">
        <img src="static/mine1.png" >
        <span>个人中心</span>
      </router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Tabbar"

  }
</script>

<style scoped>
  /*底部导航样式*/
  .bottom-bar{
    position: fixed;
    bottom: 0;
    width: 72rem;
    height: 8rem;
    display: flex;
    justify-content: space-around;
    text-align: center;
    background: #fff;
    z-index: 999;
    padding: 2rem 0;
    border-top: 1px solid #e6e6e6;

  }
  #app span{
    font-size: 2rem;
  }
  #shouye,#fenlei,#shop-car,#mine{
    width: 8rem;
    height: 8rem;
  }
  #shouye img,#fenlei img,#shop-car img,#mine img{
    width: 5rem;
    height: 5rem;
  }
  #shouye span,#fenlei span,#shop-car span,#mine span{
    display: block;
    width: 100%;
    height: 2rem;
  }
  #dhw{
    width: 12rem;
    height: 5rem;
  }
</style>
